<template>
    <div>
        <Modal width="1650"
               v-model="modal.classAddressFlag"
               @on-cancel="cancel"
               title="编辑上课地址">
            <div class="modalDiv"></div>
            <Form inline :label-width="100">
            <FormItem prop="collegeId" label="周：">
                <Select v-model="week" clearable class="myform">
                    <Option v-for="item in list" :value="item" :key="item">第{{item}}周</Option>
                </Select>
            </FormItem>
        </Form>
            <a-table bordered :columns="columns" :data-source="data" :pagination="false">
                <template v-for="(item,index) in columns" :value="item" :slot="item.dataIndex" slot-scope="text,record">
                    <editable-cell v-if="sonRefresh" :text="text" @change="onCellChange(record.key, item.dataIndex, $event)"/>
                </template>
            </a-table>
            <Button slot="footer" type="info" @click="ok">确定</Button>
        </Modal>
    </div>
</template>

<script>

    import 'ant-design-vue/dist/antd.css';
    import Vue from 'vue';
    import {Table} from 'ant-design-vue';
    import EditableCell from "../../EditableCell/EditableCell";
    import {templateData} from "@/libs/util"

    Vue.component(Table.name, Table);
    Vue.use(Table);


    export default {
        name: "editAddress",
        components: {
            EditableCell,
        },
        props: {
            modal: {
                classAddressFlag: false,
                row: {},
            }
        },
        data() {
            return {
                week: "一",
                sonRefresh:true,
                addressMap: {}, //addressMap[day] = list.
                addAddressMap: {},
                editAddressMap: {},
                operationMap:{},
                listWeer: [],
                columns:[
                    {
                        title: '上课时间',
                        width: 200,
                        dataIndex:'time',
                    },
                    {
                        title: '星期一',
                        width: 200,
                        dataIndex:'monday_place',
                        scopedSlots: { customRender: 'monday_place' },
                    },
                    {
                        title: '星期二',
                        width: 200,
                        dataIndex:'tuesday_place',
                        scopedSlots: { customRender: 'tuesday_place' },
                    },
                    {
                        title: '星期三',
                        width: 200,
                        dataIndex:'wednesday_place',
                        scopedSlots: { customRender: 'wednesday_place' },
                    },
                    {
                        title: '星期四',
                        width: 200,
                        dataIndex:'thursday_place',
                        scopedSlots: { customRender: 'thursday_place' },
                    },
                    {
                        title: '星期五',
                        width: 200,
                        dataIndex:'friday_place',
                        scopedSlots: { customRender: 'friday_place' },
                    },
                    {
                        title: '星期六',
                        width: 200,
                        dataIndex:'saturday_place',
                        scopedSlots: { customRender: 'saturday_place' },
                    },
                    {
                        title: '星期日',
                        dataIndex:'sunday_place',
                        scopedSlots: { customRender: 'sunday_place' },
                    }

                ],
                data: [
                ],
                templateData: [
                    /**
                     * 1-2节
                     */
                    {
                        key: '0',
                        time: '1-2节',
                        monday_place: '',
                        tuesday_place: '',
                        wednesday_place: '',
                        thursday_place: '',
                        friday_place: '',
                        saturday_place: '',
                        sunday_place: ''
                    },
                    /**
                     * 3-4节
                     */
                    {
                        key: '1',
                        time: '3-4节',
                        monday_place: '',
                        tuesday_place: '',
                        wednesday_place: '',
                        thursday_place: '',
                        friday_place: '',
                        saturday_place: '',
                        sunday_place: ''
                    },
                    /**
                     * 5-6节
                     */
                    {
                        key: '2',
                        time: '5-6节',
                        monday_place: '',
                        tuesday_place: '',
                        wednesday_place: '',
                        thursday_place: '',
                        friday_place: '',
                        saturday_place: '',
                        sunday_place: ''
                    },
                    /**
                     * 7-8节
                     */
                    {
                        key: '3',
                        time: '7-8节',
                        monday_place: '',
                        tuesday_place: '',
                        wednesday_place: '',
                        thursday_place: '',
                        friday_place: '',
                        saturday_place: '',
                        sunday_place: ''
                    },
                    /**
                     * 9-11节
                     */
                    {
                        key: '4',
                        time: '9-11节',
                        monday_place: '',
                        tuesday_place: '',
                        wednesday_place: '',
                        thursday_place: '',
                        friday_place: '',
                        saturday_place: '',
                        sunday_place: ''
                    },
                ],
                timetableDO: {},
                timetableList: [],
                list: ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二', '十三', '十四', '十五', '十六', '十七', '十八', '十九', '二十'],
            }
        },
        methods: {
            onCellChange(key, timeStr, value) {
                debugger;
                console.log(key, timeStr, value)
                this.data[key][timeStr] = value;
                if (this.data[key].id != null && this.data[key].id!='') {
                    this.data[key].day = this.week
                    this.data[key].classId = this.modal.row.classId
                    this.editAddressMap[this.data[key].id] = this.data[key]
                } else {
                    this.data[key].day = this.week
                    this.data[key].classId = this.modal.row.classId
                    this.addAddressMap[this.week +','+ key] = this.data[key]
                }
            },
            ok() {
                //判断editAddressMap、addAddressMap 两个List是否有值，如果有进行相关 的操作
                if(this.editAddressMap != null){
                    this.operationMap['edit'] = this.editAddressMap
                }
                if(this.addAddressMap != null){
                    this.operationMap['add'] = this.addAddressMap
                }
                if(this.operationMap !=null){
                    this.http.post('/course/editAddress',this.qs.parse(this.operationMap)).then(res=>{
                        if(res){
                            if (res) {
                                this.$Message.success('添加成功！');
                                //重新获取课程表，并替换之前的课程表

                            }
                        }
                    })
                }
            },
            getAddressData(list) {
                for (let index = 0; index < list.length; index++) {
                    if (this.addressMap[list[index].day]) {
                        list[index]['key'] = this.addKey(list[index].time);
                        this.addressMap[list[index].day].splice(list[index]['key'], 1, list[index]);
                    } else {
                        let listData = [];
                        Object.assign(listData, this.templateData)
                        list[index]['key'] = this.addKey(list[index].time);
                        listData.splice(list[index]['key'], 1, list[index]);
                        this.addressMap[list[index].day] = listData;
                    }
                }
                //处理完数据后展示数据（默认展示）
                this.exhibitionData("一");
            },
            addKey(str) {
                if (str == '1-2节') {
                    return 0;
                } else if (str == '3-4节') {
                    return 1;
                } else if (str == '5-6节') {
                    return 2;
                } else if (str == '7-8节') {
                    return 3;
                } else {
                    return 4;
                }
            },
        /**
         * 展示数据
         */
        exhibitionData(str) {
           debugger;
            //展示指定周次课表exhibitionData
            if (this.addressMap[str]) {
                Object.assign(this.data,this.addressMap[str])
            } else {
                Object.assign(this.data,templateData())
            }
            this.sonRefresh= false;
            this.$nextTick(() => {
                this.sonRefresh= true;
            });
        }
        ,
        cancel() {

        },
    },
    created(){
    },
    watch:{
        'modal.row'(e)
        {
            Object.assign(this.$data, this.$options.data())
            if (e) {
                    console.log(this.modal.row)
                //讲课程地址数据渲染到表格中
                this.getAddressData(e.list)
            }
        }
    ,
        week(e,i)
        {
            this.addressMap[i] = this.data;
            this.data = [];
            this.exhibitionData(e)

        }
    ,
    }
    }
</script>

<style scoped>
    .myform {
        width: 280px;
    }
</style>
